<template>
  <section class="auth-wrap">
    <div class="card auth-card">
      <div class="card-header">
        <h2 class="card-title">欢迎回来</h2>
        <p class="subtitle">请使用账户登录以继续</p>
      </div>
      <div class="row">
        <div class="field">
          <label>用户名</label>
          <input type="text" v-model.trim="username" placeholder="请输入用户名" />
        </div>
        <div class="field">
          <label>密码</label>
          <input type="password" v-model="password" placeholder="请输入密码" />
        </div>
      </div>
      <div class="controls">
        <button class="btn btn-primary" @click="login">登录</button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import http from '@/utils/http'

const router = useRouter()
const auth = useAuthStore()
const ui = useUiStore()

const username = ref('')
const password = ref('')

async function login() {
  if (!username.value || !password.value) {
    ui.showToast('请输入用户名和密码', 'error')
    return
  }
  try {
    const { data } = await http.post('/auth/login', { username: username.value, password: password.value })
    auth.setAuth(data.accessToken, data.user)
    ui.showToast('登录成功', 'success')
    router.replace('/')
  } catch (e) {
    ui.showToast(e.response?.data?.message || e.message || '登录失败', 'error')
  }
}
</script>

<style scoped>
 .auth-wrap { width: 100%; min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
 .auth-card { width: 100%; max-width: 420px; padding: 20px 18px; }
 .card-header { margin-bottom: 10px; }
 .card-title { margin: 0 0 6px; text-align: center; }
 .subtitle { color: var(--text-subtle); margin: 0; text-align: center; }
 .row { display: grid; grid-template-columns: 1fr; gap: 12px; }
 .field label { display: block; font-weight: 600; margin-bottom: 6px; }
 input { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--color-border); }
 input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
 .controls { margin-top: 12px; }
 .controls .btn { width: 100%; }
 .error { color: var(--danger); margin-top: 8px; text-align: center; }
</style>